<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 属性节点(html属性) 写在标签内 和 标签名一个空格分隔的叫做属性 -->
    <!-- 属性可以没有 也可以有多个  多个属性之间用空格分隔 -->
    <div id="demo" class="one two three" title="你好" data-index="0" data-id="0" data-content="test" asd="asd">hello</div>
</body>
<script>
    // 属性节点   setAttribute(key,val)  getAttribute(key) 
    var demo = document.getElementById("demo");

    // console.log(demo.getAttribute("id"));
    // console.log(demo.getAttribute("class"));
    // console.log(demo.getAttribute("title"));
    // console.log(demo.getAttribute("data-index"));

    // demo.setAttribute("id", "omed");
    // demo.setAttribute("class", "first");
    // demo.setAttribute("title", "我不好");

    // 元素节点的属性   ele.xxx
    // 元素节点  => 对象  => 存在修饰该元素的属性和方法
    console.dir(demo);
    console.log(demo.id);
    console.log(demo.className);
    console.log(demo.classList);
    console.log(demo.title);

    // !!!!!!!!!!!
    // 以 data-xxx开头的自定义属性可以在元素节点中获取 , asd无法获取(只能通过getAttribute(key))
    console.log(demo.dataset.id);
    console.log(demo.dataset.index);
    console.log(demo.dataset.content);

    // 设置
    demo.id = "omed";
    demo.className = "first second third";
    demo.title = "我很好";
    demo.dataset.index = "1000";


    demo.timer = 100; // 元素节点的自定义属性 ( 元素节点  => 对象  => 给对象赋值一个不存在的属性名  => 新增该属性到对象中)


</script>

</html>